<template>
	<!-- 功能一开始 -->
	<div>
		<button @click="show">显示</button>
		<button @click="hide">隐藏</button>
		<div v-if="showDivFlag">显示或隐藏</div>
	</div>
	<!-- 功能一结束 -->
	<!-- 功能二的开始 -->
	<div>
		<button @click="changeYellow">变黄色</button>
		<button @click="changeBlue">变蓝色</button>
		<p :style="{ color: `${styleColor}` }">可以修改的颜色文字</p>
	</div>
	<!-- 功能二的结束 -->
</template>

<script>
import { ref } from 'vue'
export default {
	name: 'App',
	beforeCreate() {
		console.log('执行 beforeCreate')
	},
	setup() {
		console.log('this:,', this)
		// 功能一的代码
		const showDivFlag = ref(false)
		function show() {
			showDivFlag.value = true
		}
		function hide() {
			showDivFlag.value = false
		}
		// 功能一代码的结束
		/* 功能二的代码 */
		const styleColor = ref('red')
		function changeYellow() {
			styleColor.value = 'yellow'
		}
		function changeBlue() {
			styleColor.value = 'blue'
		}
		/* 功能二的代码结束 */
		return {
			showDivFlag,
			show,
			hide,
			styleColor,
			changeBlue,
			changeYellow,
		}
	},
}
</script>
